<template>
  <div class="list">
        <!-- 渲染多个商品(列表) -->
        <div class="good" v-for="(item,index) in tabs[currentIndex].list" :key="index">
            <div class="imgbox">
            <img :src="item.pic" alt="">
            </div>
            <div class="text">
              <div class="name">{{item.name}}</div>
              <div class="bottom">
                <div class="price">¥{{item.price}}</div>
                <button>+</button>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    // 通过props接收从父组件传来的值，该值是只读的(不能修改)
    props:['tabs','currentIndex']
}
</script>

<style lang='scss' scoped>
.list{
  flex:1;
}
.list .good{
  display: flex;
  margin: 10px 0;
}
.list .good .imgbox{
  width: 110px;
  // height:100px;
  margin-right: 10px;
}
.list .good .imgbox img{
  width: 100%;
}
.list .text{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
} 
.list .text .name{
  font-weight: bold;
}
.list .text .bottom{
  display: flex;
  justify-content: space-between;
}
.list .text .bottom .price{
  color:red;
}
.list .text button{
  width: 20px;
  height: 20px;
  background-color: skyblue;
  border-radius: 50%;
  border: 0;
  color:#fff;
}
</style>